<template>
    <div class="page">
        <div class="map_box">
            <MyEarth ref="earthBox"></MyEarth>
        </div>

        <div class="router_box">
            <router-view @mapCmder="mapCmder"></router-view>
        </div>
    </div>
</template>
  
<script setup>
// import {useRouter,useRoute} from 'vue-router';
import MyEarth from './map/index.vue';
import { ref, onMounted } from 'vue'

const earthBox = ref(null)
let cmderList = null

// 传递页面map指令
const mapCmder = (data) => { console.log(data); cmderList[data]() }

onMounted(() => {
    // 获取可用的map指令列表
    cmderList = earthBox.value.cmderList
})

</script>
  
<style scoped>
.router_box{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
}
.map_box{
    height: 100%;
    width: 100%;
}
</style>
  